<template>
  <div class="app">
    <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
      <el-tab-pane
        v-for="(page, index) in pages"
        :key="index"
        :label="`Page ${index + 1}`"
        :name="`page${index + 1}`"
      >
        <first-level-page :data="page.data"></first-level-page>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import FirstLevelPage from "../components/Test20250624/FirstLevelPage.vue";

export default {
  components: {
    FirstLevelPage,
  },
  data() {
    return {
      activeTab: "page1", // 默认激活第一个标签页
      pages: [
        { data: this.generateFakeData(30) }, // 每个一级页面有30条数据
        { data: this.generateFakeData(30) },
        { data: this.generateFakeData(30) },
      ],
    };
  },
  methods: {
    generateFakeData(count) {
      const data = [];
      for (let i = 0; i < count; i++) {
        data.push({
          id: i,
          name: `Item ${i + 1}`,
          description: `Description for Item ${i + 1}`,
        });
      }
      return data;
    },
    handleTabClick(tab) {
      console.log("Switched to tab:", tab.name);
    },
  },
};
</script>

<style>
.app {
  margin-top: 10px;
  margin-left: 10px;
}
</style>



